<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expandable Table Example</title>
<style>
  .expandable-table {
    width: 100%;
    border-collapse: collapse;
  }
  .expandable-table th, .expandable-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
  .expandable-table .additional-data {
    display: none;
  }
</style>
</head>
<body>

<h2>Expandable Table Example</h2>

<table class="expandable-table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td><button class="expand-btn" onclick="toggleAdditionalData(this)">Expand</button></td>
    </tr>
    <tr class="additional-data">
      <td colspan="3">
        <p>Additional data to show when expanded.</p>
        <p>This can include charts, graphs, or more detailed information.</p>
      </td>
    </tr>
  </tbody>
</table>

<script>
  function toggleAdditionalData(button) {
    var row = button.closest('tr');
    var additionalRow = row.nextElementSibling;

    if (additionalRow.classList.contains('additional-data')) {
      var isExpanded = additionalRow.style.display === 'table-row';
      additionalRow.style.display = isExpanded ? 'none' : 'table-row';
      button.textContent = isExpanded ? 'Expand' : 'Collapse';
    }
  }
</script>

</body>
</html>
